<template>
	<div>
		<div style="margin-top: 3.2rem;">
			<top-nav bgColor="white" title="问题反馈"   :rightShow="true" returnPath="上一级"></top-nav>
			<section style="background-color: #f5f5f5; height: 3.2rem; line-height: 3.2rem;">
				<span style="margin-left: 5%; font-size: 1rem;">请提供详细问题和意见</span>
			</section>
			<section style="position: relative; height: 9.2rem;background-color: #fff;">
				<textarea class="remove-texStyle" placeholder="请输入问题描述(不少于20个字)" v-model="valueChange"></textarea>
				<aside class="count-font" >
					<span>{{valueChange.length}}</span>
					<span style="color: #b7b7b7;">/300</span>
				</aside>
			</section>
			<!--<br><h4>  我的反馈</h4><br/>-->
			<br><br/>
			<div v-for="(item ,index) in fklb" key="item">
				<div style="background-color:#69d3fb;padding:1rem;">
					<div style="font-size:1rem;">
						{{item.FKNR}}
					</div>
					<div style="font-size:0.8rem;color:rgb(155, 155, 155)">{{item.FKSJ}}</div>
				</div>
				<div style="background-color:white;margin-bottom:10px;padding:1rem;border-bottom:1px solid #69d3fb">
					<div>{{item.HF==null?'暂未回复':item.HF}}</div>
					<div>{{item.HFSJ}}</div>
				</div>
			</div>
			<mu-bottom-nav @change="handleChange" class="bottom-btnbar">
			    <mu-bottom-nav-item value="clearVal" title="清除" icon="clear"/>
			    <mu-bottom-nav-item value="submitPop" title="提交" icon="save"/>
			  </mu-bottom-nav>
			<section class="btn-container" >
				<mu-dialog :open="dialog" title="" @close="close">
				        请输入不少于20个字文字描述
				    <!--<mu-flat-button slot="actions" @click="close('cancelLess')" primary label="取消"/>-->
				    <mu-flat-button slot="actions" primary @click="close('sureLess')" label="确定"/>
			    </mu-dialog>
			    
			    <mu-dialog :open="popCommissary" :title="popTitleInfo" @close="close">
			      <mu-flat-button slot="actions" @click="close('cancel')" primary label="取消"/>
			      <mu-flat-button slot="actions" primary @click="close('sure')" label="确定"/>
			    </mu-dialog>
				
			</section>
		</div>
	</div>
</template>

<script>
	import TopNav from '@/components/nav/topNav.vue'
export default {
//	components: {
//		TopNav,
//	},
	data () {
    return {
    	valueChange:'',
    	dialog:false,
    	popTitleInfo:'',
    	isSubmitThis:false,
      	popCommissary:false,
      	fklb: [],
      	subUser:localStorage.userNumber,
      	currentTime:'',
	  	currentmonth:'',
	  	currentFullDate:'',
	  	year:'',
		month:'',
	  	currDate:'',
      }
    },
	computed:{
	},
	mounted(){
//	      this.getFK()
		  this.variousTime()
	},methods: {
		handleChange(val){
	      	if(val=='submitPop'){
		        if(this.valueChange.length<20){
       				this.open()
   				}else if(this.valueChange.length>=20){
		        	this.popTitleInfo="确定要提交吗？"
		        	this.variousTime()
		        	this.submitThis()
		        	
		        }
	      	}else{
		        this.clearVal()
	      	}
	    },
	    getFK(){
	    	let that = this
	    	this.axios.get('/gleenSoft-base/xxgl/feedback/list').then(function (response) {
	        	that.fklb = response.data.result
	      	}).catch(function (error) {
	        	console.log(error);
	      	});
	    },
	    variousTime(){
	    	var thisDate=new Date()
			var currentYear=thisDate.getFullYear()
		  	var mon=this.correcTime(thisDate.getMonth()+1)       
		  	var toDate=this.correcTime(thisDate.getDate())
		  	var currentHour=this.correcTime(thisDate.getHours()) 
		  	var currentMinutes=this.correcTime(thisDate.getMinutes())
		  	
		  	this.year=thisDate.getFullYear()+''
		  	this.month=this.correcTime(thisDate.getMonth()+1)+''
		  	this.currDate=this.correcTime(thisDate.getDate())+''
			this.currentmonth=mon+'-'+toDate
		  	this.currentTime=currentHour+':'+currentMinutes
		  	this.currentFullDate=currentYear+'-'+this.currentmonth
	    },
	    correcTime(data){
	    	if(data<10){
	    		data='0'+data
	    	}
	    	return data
	    },
//      submitPop(){
//      	let that = this
//     		if(this.valueChange.length<20){
//     			this.open()
//     		}else{
//     			this.axios.post('/gleenSoft-base/xxgl/feedback/save',{FKNR:this.valueChange}).then(function (response) {
//	        		console.info(response)
//					that.getFK()
//		      	}).catch(function (error) {
//		        	console.log(error);
//		      	});
//     		}
//      },
        submitPop2(){
        	let that = this
       		
       			that.axios.post('/iyx/feedback/InsertFeedback?token='+localStorage.token,
       			{
       				feederid:that.subUser,
       				feedbackcontent:that.valueChange,
       				feedbacktime:that.currentFullDate+'-'+that.currentTime
       			}).then(function (response) {
	        		if(response.data=='操作完成'){
	        			that.$parent.showToast('提交成功')
	        		}else{
	        			that.$parent.showToast('提交失败')
	        		}
	        		
		      	}).catch(function (error) {
		        	that.$parent.showToast('提交失败')
		      	});
       		
        },
       	clearVal(){
       		this.valueChange=''
       	},
	  	submitThis(){
	    	this.popCommissary=true
	    	this.popTitleInfo='确定要提交吗？'
	    },
       	open () {
	      this.dialog = true
	    },
	    close (val) {
	      if(val=='cancelLess'||val=='sureLess'){
	      	  this.dialog = false
	      }else if(val=='cancel'||val=='sure'){
	      	this.popCommissary=false
	      	if(val=='sure'){
	      		this.submitPop2()
	      	}
	      }
	    }
	},watch: {
		valueChange(val,oldval){
//			this.texValChange(val)
			if(val.length>300){
				this.valueChange=this.valueChange.slice(0,300)
			}
		}
	}
	
}
</script>

<style>
	.remove-texStyle{
		resize:none;
		width: 100%;
		outline:none;
		border:none;
		text-indent: 5%;
		height: 7rem;
		font-size: 1rem;
		line-height: 1.4rem;
	}
	.remove-texStyle[placeholder]{
		color: #b7b7b7;
	}
	.clear-btn{
		color: #2799f3 !important; 
		border: 1px solid #2799f3 !important; 
		background-color: rgba(1,1,1,0) !important; 
		box-sizing: border-box !important;
	}
	/*.btn-container{
		background-color: #fff;
		display: flex;
		justify-content: center; 
		align-items: center;
		padding: 1rem 0; 
		margin-top: 0.5rem;
	}*/
	.count-font{
		position: absolute; 
		right: 1rem; 
		bottom: 0.4rem;
	}
</style>